@extends('base')

@section('content')
    <div id="container">

        <div class="container">

            <div class="container_title">
                <div class="fl"><h2><a href="">[ICON]精选专题</a></h2>
                </div>
                <div class="container_nav">

                    <a href="">100万+海量高质量素材，每天更新2000+内容，VIP特惠发售!</a>


                </div>
                <div class="more"><a href="">更多>></a></div>

            </div>

            <div class="container_pic clearfix">


                <div class="pic_special fl">
                    <a href=""><img class="lazy"  data-original="images/dz.jpg"></a>
                    <div class="top-pic"><h3>来个专题标题</h3></div>
                </div>

                <div class="pic_special fl">
                    <a href=""><img class="lazy" data-original="images/dz.jpg"></a>
                    <div class="top-pic"><h3>来个专题标题</h3></div>
                </div>
                <div class="pic_special fl">
                    <a href=""><img class="lazy" data-original="images/dz.jpg"></a>
                    <div class="top-pic"><h3>来个专题标题</h3></div>
                </div>
                <div class="pic_special fl">
                    <a href=""><img class="lazy" data-original="images/dz.jpg"></a>
                    <div class="top-pic"><h3>来个专题标题</h3></div>
                </div>



            </div>

            <div class="clear_30"></div>

            @for($i=0; $i<4;$i++)
                <div >
                <div class="container_title">
                    <div class="fl"><h2><a href="">[ICON]免抠元素</a></h2>
                    </div>
                    <div class="container_nav">
                        <a href=""></a>
                        <a href="">精选图标</a>
                        <a href="">炫彩效果</a>
                        <a href="">卡通人物</a>
                        <a href="">背景元素</a>

                    </div>
                    <div class="more"><a href="">更多>></a></div>

                </div>
                <div class="container_pic clearfix">
                    <div class="pic_box fl">
                        <div class="pic"><a href="">
                                <div class="pic-track-matte"></div>
                                <img class="lazy"  data-original="images/true.jpg" alt="">

                            </a>
                            <div class="pic-down">
                                <a href="javascript:void(0)" class="fav-add">收藏</a><a href="javascript:void(0)">下载</a></div>
                        </div>
                        <div class="pic_link"><a href="">标题文字在这里</a></div>
                    </div>

                    <div class="pic_box fl">
                        <div class="pic"><a href="">
                                <div class="pic-track-matte"></div>
                                <img class="lazy"  data-original="images/true.jpg" alt="">

                            </a>
                            <div class="pic-down">
                                <a href="javascript:void(0)" class="fav-add">收藏</a><a href="javascript:void(0)">下载</a></div>
                        </div>
                        <div class="pic_link"><a href="">标题文字在这里</a></div>
                    </div>
                    <div class="pic_box fl">
                        <div class="pic"><a href="">
                                <div class="pic-track-matte"></div>
                                <img class="lazy"  data-original="images/true.jpg" alt="">

                            </a>
                            <div class="pic-down">
                                <a href="javascript:void(0)" class="fav-add">收藏</a><a href="javascript:void(0)">下载</a></div>
                        </div>
                        <div class="pic_link"><a href="">标题文字在这里</a></div>
                    </div>

                    <div class="pic_box fl">
                        <div class="pic"><a href="">
                                <div class="pic-track-matte"></div>
                                <img class="lazy"  data-original="images/true.jpg" alt="">

                            </a>
                            <div class="pic-down">
                                <a href="javascript:void(0)" class="fav-add">收藏</a><a href="javascript:void(0)">下载</a></div>
                        </div>
                        <div class="pic_link"><a href="">标题文字在这里</a></div>
                    </div>


                </div>
            </div>
            @endfor
        </div>
    </div>
@endsection

@section('script')
<script>

    $(function () {
        // ajax 请求数据，填充
        $.ajax({
            headers: {
                "Accept": "application/json; charset=utf-8",
                "X-CSRF-TOKEN" : $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('api.column') }}",
            method: 'get',
            success:function (resp) {
                if ( resp.status === 0 ){
                    var render = ""
                    $.each(resp.data, function (key, item) {

                    })

                } else {
                    $('.error_code').html(resp.errMsg);
                    $("#login_code").addClass("error-border");
                }
            }
        });
    })
</script>
@endsection